<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档流</title>
    
    <style>
        .box1{
            width:100px;
            background-color: aqua;
        }
        .box2{
            width:100px;
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <script>
        /*布局(layout)
        1、文档流(normal flow):网页是一个多层结构，一层叠着一层；通过css可以分别为每一层来设置样式;
        作为用户来讲只可以看到最顶层；最底下一层称为文档流，是网页的基础，我们所创建的元素默认都是在文档流中排列
        元素的两个状态：在文档流中和不在文档流中（脱离文档流）
        2、元素在文档流中的特点
        （1）块元素:在页面中独占一行;默认宽度是父元素的全部（会把父元素撑开）;默认高度是被内容撑开（子元素）  div
        （2）行内元素：不会独占页面一行，只占自身大小;行内元素在页面中自左向右水平排列，  span
        如果一行之中不能容纳所有的行内元素，则元素会自动换到第二行自左向右排列
        默认宽度和默认高度都是被内容撑开
        */
        </script>
        <div class="box1">我是div1</div>
        <div class="box2">我是div2</div>
        <span>我是span1</span>
        <span>我是span2</span>
    
</body>
</html>